ul.catelogue-list {
  li {
    background-color: #fff;
    border-radius: var(--radius);
    height: 36px;
    padding: 4px 12px;
    position: relative;
    border: 1px solid transparent;
    &:hover {
      color: #b9a116;
      .edit {
        opacity: 1;
      }
    }
    .star {
      position: absolute;
      right: -10px;
      top: -10px;
    }
    .enter {
      height: 100%;
      color: white;
      cursor: pointer;
      opacity: 0;
      &:hover {
        opacity: 1;
        background-color: #ffd662;
        border-radius: 2px;
      }
    }
    .edit {
      width: 60px;
      opacity: 0;
      background-color: #f8f8f8;
      border-radius: 4px;
      .icon-button {
        img{
          width: 16px;
          height: 16px;
        }
        &:hover {
          background-color: #ffd662;
        }
      }
      display: flex;
      justify-content: space-around;
    }
  }

  .program-title {
    overflow: hidden;
    width: 40px;
    text-overflow: ellipsis;
  }
  .category {
    background-color: #e7e7e7;
    width: 40px;
    text-align: center;
    border-radius: 2px;
    color: #333;
    padding: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .active {
    background-color: #fee14028;
    border: 1px solid #fee140;
    color: #333 !important;
  }
}
.gradient-text {
  background: linear-gradient(45deg, #f15c5c, #fee140);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.empty{
  padding: 16px;
  height: 100%;
  border-radius: var(--radius);
}
.core-button{
  width: 80px;
  color: white;
  height: 24px;
}